<template>
	<div>
		<div id="Search">
		  <input type="text" placeholder="输入城市名或拼音" class="search-input" v-model="keyworld"></input>
		</div>
		<div class="search-content" ref="search" v-show="keyworld">
			<ul>
				<li v-for="item of list" class="search-item border-bottom" :key="item.id" @click="handleCityClick(item.name)">{{item.name}}</li>
				<li class="search-item border-bottom" v-show="!list.length">没有找到匹配数据</li>
			</ul>
		</div>
	</div>
</template>

<script>
import Bscroll from 'better-scroll'
export default {
  name: 'Search',
  props:{
  	cities:Object
  },
  data(){
  	return{
  		keyworld:'',
  		list:[],
  		timer:null
  	}
  },
  watch:{
  	keyworld(){
  		if(this.timer){
  			clearTimeout(this.timer)
  		}
  		if(!this.keyworld){
  			this.list = [];
  			return
  		}
  		this.timer = setTimeout(()=>{
  			const result = [];
  			for(let i in this.cities){
  				this.cities[i].forEach((value)=>{
  					if(value.spell.indexOf(this.keyworld) > -1 || value.name.indexOf(this.keyworld) > -1){
  						result.push(value)
  					}
  				})
  			}
  			this.list = result;
  		},100)
  	}
  },
  mounted:function(){
  	this.scroll = new Bscroll(this.$refs.search);
  },
  methods:{
    handleCityClick(city){
      this.$store.dispatch('changeCity',city);
      this.$router.push('/')
    }
  }
}
</script>

<style scoped>
#Search{
	height: .72rem;
	padding: 0 .1rem;
	background-color: #00bcd4;
}
.search-input{
	box-sizing: border-box;
	height: .62rem;
	line-height: .62rem;
	width: 100%;
	text-align: center;
	border-radius: .6rem;
	color: #666;
	padding: 0 .1rem;
}
.search-content{
	position: absolute;
	top: 1.58rem;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	background-color: #eee;
	z-index: 1;
}
.search-item{
	line-height: .62rem;
	padding-left: .2rem;
	color: #666;
	background-color: #fff;
}
</style>